<template>
    <div class="middle-top-chart" id="charts-third"></div>
</template>
<script>
import echarts from "echarts";
import "echarts-gl";
export default {
    name: "views",
    data() {
        return {
            mapObj: null,
            city: {
                lufeng: require("../../assets/json/lf.json"),
            },
            hisData:[]
        };
    },
    mounted() {
        this.hisData = require("../../assets/json/info.json");
        this.initMap(this.city["lufeng"], "禄丰市", this.hisData.data);
    },

    methods: {
        initMap(mapJson, name, data) {
            var domImgHover = document.createElement("img");
            domImgHover.style.height =
                domImgHover.height =
                domImgHover.width =
                domImgHover.style.width =
                    "8px";
            domImgHover.src =
                "";
            this.mapObj = echarts.init(document.getElementById("charts-third"));
            echarts.registerMap(name, mapJson);
            const option = {
                geo: {
                    map: name,
                    aspectScale: 1.25, //长宽比
                    top: "8%",
                    left:"17%",
                    zoom: 1.2,
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: "#013C62",
                            shadowColor: "#182f68",
                            shadowOffsetX: 0,
                            shadowOffsetY: 25,
                        },
                        emphasis: {
                            areaColor: "#2AB8FF",
                            borderWidth: 0,
                            color: "green",
                            label: {
                                show: false,
                            },
                        },
                    },
                },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol:
                            "image://" +
                            require("/src/assets/image/mainView/point.png"),
                        // symbolSize: [41, 54],
                        symbolSize: [30, 37],

                        data: data,
                        label: {
                            normal: {
                                // formatter: "{b}\n10000人",
                                formatter:function(params){
                                    return params.data.name + ":"+ params.data.inHos + "人";
                                },
                                position: "top",
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 18,
                                },
                            },
                        },
                    },

                    {
                        type: "map",
                        map: name,
                        aspectScale: 1.25, //长宽比
                        top: "9%",
                        left:"17%",
                        zoom: 1.2,
                        label: {
                            show: false,
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "#2ab8ff",
                                borderWidth: 1.5,
                                areaColor: "#12235c",
                            },
                            emphasis: {
                                areaColor: {
                                    image: domImgHover,
                                    repeat: "repeat",
                                },
                                borderWidth: 1.5,
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        roam: false,
                    },

                    {
                        tooltip: {
                            show: false,
                        },
                        type: "effectScatter",
                        aspectScale: 1.2, //长宽比
                        top: "-1%",
                        coordinateSystem: "geo",
                        rippleEffect: {
                            scale: 10,
                            brushType: "stroke",
                        },
                        showEffectOn: "render",
                        itemStyle: {
                            normal: {
                                shadowColor: "#0ff",
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                color: new echarts.graphic.LinearGradient(
                                    1,
                                    0,
                                    0,
                                    0,
                                    [
                                        {
                                            offset: 0,
                                            color: "#64fbc5",
                                        },
                                        {
                                            offset: 1,
                                            color: "#018ace",
                                        },
                                    ]
                                ),
                            },
                        },
                        label: {
                            normal: {
                                color: "#fff",
                            },
                        },
                        symbol: "circle",
                        symbolSize: [7, 3],
                        symbolOffset: [0, 20],
                        data: data,
                        zoom: 1.1,
                    },
                ],
            };
            this.mapObj.setOption(option);
        },
    },
};
</script>
<style lang="scss">
#mainView {
    height: 100%;
    .amap-marker-label {
        background-color: transparent;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: none;
        .info {
            height: 25px;
        }
    }
    #charts-container div {
        width: 1020px !important;
        height: 630px !important;
    }
}
</style>
